<template>
	<view class="group">
		<nav-header :title="title">
			<template #right>
				<view class="nav-search">
					<uni-search-bar v-model="searchText" cancelButton="none" placeholder="搜索"></uni-search-bar>
				</view>
			</template>
		</nav-header>
		<view class="loading-icon">
			<!-- <up-loading-icon timing-function="linear" text="加载中..." mode="semicircle" :show="loading">
			</up-loading-icon> -->
			<up-loading-page :loading="loading"></up-loading-page>
		</view>

		<view v-if="groupList.length == 0 && !loading">
			<up-empty :icon="getResource('/icon/empty-message.svg')" text="暂无数据">
			</up-empty>
		</view>
		<view class="group-items" v-else>
			<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
				<view v-for="group in groupList" :key="group.id" v-show="!searchText || group.showGroupName.includes(searchText)">
					<!-- <group-item v-if="!group.quit&&group.showGroupName.includes(searchText)"
						:group="group"></group-item> -->
					<view class="group-item" v-if="!group.quit&&group.showGroupName.includes(searchText)">
						<head-image :url="group.headImage" :name="group.showGroupName" :isGroup="true"
							:size="100"></head-image>
						<text class="group-name">{{ group.showGroupName }}</text>
					</view>
				</view>
			</scroll-view>
			<view style="padding: 20px;" v-if="hasMore && groupList.length>0 && !searchText">
				<up-button type="primary" :loading="loading" @tap="getData">加载更多</up-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText: "",
				type: null,
				groupList: [],
				title: "",
				groupId:null,
				hasMore: true,
				loading: false,
				pageNum:1,
				pageSize:10
			}
		},
		methods: {
			onFocusSearch(value) {

			},
			getData() {
				this.loading = true
				if (this.type == "common") {
					this.title = "与他共同的群聊"
					this.$http({
						url: `/group/findGroupWithFriend/${this.groupId}?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,
						method: "GET"
					}).then((data) => {
						this.groupList.push(...data.records)
						this.hasMore = data.pages != data.current
						this.pageNum++
						this.loading = false
					})
				} else if (this.type == "him") {
					this.title = "他加入的官方群"
					this.$http({
						url: `/group/findFriendOfficialGroup/${this.groupId}?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,
						method: "GET"
					}).then((data) => {
						// this.groupList = data.list
						this.groupList.push(...data.records)
						this.hasMore = data.pages != data.current
						this.pageNum++
						this.loading = false
					})
				}

			},
			onCreateNewGroup() {
				uni.navigateTo({
					url: "/pageSubOne/group/group-edit"
				})
			}
		},
		onLoad(options) {
			this.type = options.type
			this.groupId=options.id
			this.getData()
		}

	}
</script>

<style lang="scss" scoped>
	.group {
		// position: relative;
		// border: #dddddd solid 1px;
		// display: flex;
		// flex-direction: column;

		.loading-icon {
			position: absolute;
			top: 50%;
			left: 40%;
		}

		.nav-search {
			width: 100px;
			height: 100%;
			/* #ifndef MP-WEIXIN */
			padding-top: 20rpx;
			/* #endif */
		}

		.nav-bar {
			padding: 2rpx 20rpx;
			display: flex;
			align-items: center;
			background-color: white;

			.nav-search {
				flex: 1;
			}

			.nav-add {
				cursor: pointer;
			}
		}

		.group-item {
			display: flex;
			align-items: center;
			padding: 30rpx;

			.group-name {
				margin-left: 20rpx;
				flex: 1;
				font-weight: 600;
			}
		}
	}
</style>